<template>
    <div class="ul-tree">
        <ul>
          <li>
              <a @click="toggle(data.name,data.id,data.children,data.depth)">{{data.name}}<Icon :type="open?'chevron-down':'chevron-right'" size="12" v-if="isFolder && data.children"></Icon></a>
              <ul class="aside-sub-nav-menu" v-show="open" v-if="isFolder">
                  <ul-tree :key="item.id" v-for="item in data.children" :data="item"></ul-tree>
              </ul>
          </li>
      </ul>
    </div>
</template>
<script>
    export default{
        name:'ul-tree',
        props: {
            data:Object
        },
        data: function () {
            return {
                open: false,
                selectedContainer:[]
            }
        },
        computed: {
          isFolder: function () {
            return this.data.children && this.data.children.length
          }
        },
        methods: {
          toggle(name,id,children,depth) {
              if (this.isFolder) {
                this.open = !this.open
              }
              if(name == '法律法规') return;
              this.selectedContainer[depth] = id;
              if(!children){
                this.$emit('transform',false);
                for(let x = depth; x < this.categoryDepth; x++){
                    this.selectedContainer.splice(x+1,this.selectedContainer.length-x+1);
                }
                this.$router.push({path:'/statute',query:{q:this.selectedContainer.join('|')}});
              }
          },
        }
    }
</script>
<style type="text/css" scoped>
    .ul-tree{ margin-left:-15px; }
    ul{ padding-left:15px; }
    ul li a{ padding:15px; border-bottom:1px solid #eee; display:block;}
    li.is-active > a{ background:#eee;}
    li a .ivu-icon{ float:right; transition: all .2s linear;}
</style>